diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -35,6 +35,7 @@
 import Chat from './chat/chat.react';
 import InputStateContainer from './input/input-state-container.react';
 import LoadingIndicator from './loading-indicator.react';
+import { ModalProvider, useModalContext } from './modals/modal-provider.react';
 import DisconnectedBar from './redux/disconnected-bar';
 import DisconnectedBarVisibilityHandler from './redux/disconnected-bar-visibility-handler';
 import FocusHandler from './redux/focus-handler.react';
@@ -83,15 +84,9 @@
   +activeThreadCurrentlyUnread: boolean,
   // Redux dispatch functions
   +dispatch: Dispatch,
-};
-type State = {
   +modal: ?React.Node,
 };
-class App extends React.PureComponent<Props, State> {
-  state: State = {
-    modal: null,
-  };
-
+class App extends React.PureComponent<Props> {
   componentDidMount() {
     const {
       navInfo,
@@ -136,16 +131,14 @@
     if (this.props.loggedIn) {
       content = this.renderMainContent();
     } else {
-      content = (
-        <Splash setModal={this.setModal} currentModal={this.state.modal} />
-      );
+      content = <Splash />;
     }
     return (
       <DndProvider backend={HTML5Backend}>
         <FocusHandler />
         <VisibilityHandler />
         {content}
-        {this.state.modal}
+        {this.props.modal}
       </DndProvider>
     );
   }
@@ -153,11 +146,9 @@
   renderMainContent() {
     let mainContent;
     if (this.props.navInfo.tab === 'calendar') {
-      mainContent = (
-        <Calendar setModal={this.setModal} url={this.props.location.pathname} />
-      );
+      mainContent = <Calendar url={this.props.location.pathname} />;
     } else if (this.props.navInfo.tab === 'chat') {
-      mainContent = <Chat setModal={this.setModal} />;
+      mainContent = <Chat />;
     }
 
     return (
@@ -177,19 +168,15 @@
             </div>
           </div>
         </header>
-        <InputStateContainer setModal={this.setModal}>
+        <InputStateContainer>
           <div className={css['main-content-container']}>
             <div className={css['main-content']}>{mainContent}</div>
           </div>
         </InputStateContainer>
-        <LeftLayoutAside setModal={this.setModal} />
+        <LeftLayoutAside />
       </div>
     );
   }
-
-  setModal = (modal: ?React.Node) => {
-    this.setState({ modal });
-  };
 }
 
 const fetchEntriesLoadingStatusSelector = createLoadingStatusSelector(
@@ -226,6 +213,7 @@
     );
 
     const dispatch = useDispatch();
+    const modalContext = useModalContext();
 
     return (
       <App
@@ -236,9 +224,18 @@
         mostRecentReadThread={mostRecentReadThread}
         activeThreadCurrentlyUnread={activeThreadCurrentlyUnread}
         dispatch={dispatch}
+        modal={modalContext.modal}
       />
     );
   },
 );
 
-export default ConnectedApp;
+function AppWithProvider(props: BaseProps): React.Node {
+  return (
+    <ModalProvider>
+      <ConnectedApp {...props} />
+    </ModalProvider>
+  );
+}
+
+export default AppWithProvider;
diff --git a/web/calendar/calendar.react.js b/web/calendar/calendar.react.js
--- a/web/calendar/calendar.react.js
+++ b/web/calendar/calendar.react.js
@@ -44,7 +44,6 @@
 import FilterPanel from './filter-panel.react';
 
 type BaseProps = {
-  +setModal: (modal: ?React.Node) => void,
   +url: string,
 };
 type Props = {
@@ -149,7 +148,6 @@
           <Day
             dayString={dayString}
             entryInfos={entries}
-            setModal={this.props.setModal}
             key={curDayOfMonth}
             startingTabIndex={tabIndex}
           />,
@@ -166,7 +164,7 @@
     let calendarContentStyle = null;
     let filterButtonStyle = null;
     if (this.state.filterPanelOpen) {
-      filterPanel = <FilterPanel setModal={this.props.setModal} />;
+      filterPanel = <FilterPanel />;
       calendarContentStyle = { marginLeft: '300px' };
       filterButtonStyle = { backgroundColor: 'rgba(0,0,0,0.67)' };
     }
diff --git a/web/calendar/day.react.js b/web/calendar/day.react.js
--- a/web/calendar/day.react.js
+++ b/web/calendar/day.react.js
@@ -23,6 +23,7 @@
 
 import LogInFirstModal from '../modals/account/log-in-first-modal.react';
 import HistoryModal from '../modals/history/history-modal.react';
+import { useModalContext } from '../modals/modal-provider.react';
 import { useSelector } from '../redux/redux-utils';
 import { htmlTargetFromEvent } from '../vector-utils';
 import { AddVector, HistoryVector } from '../vectors.react';
@@ -34,7 +35,6 @@
 type BaseProps = {
   +dayString: string,
   +entryInfos: $ReadOnlyArray<EntryInfo>,
-  +setModal: (modal: ?React.Node) => void,
   +startingTabIndex: number,
 };
 type Props = {
@@ -45,6 +45,7 @@
   +nextLocalID: number,
   +timeZone: ?string,
   +dispatch: Dispatch,
+  +setModal: (modal: ?React.Node) => void,
 };
 type State = {
   +pickerOpen: boolean,
@@ -107,7 +108,6 @@
           <Entry
             entryInfo={entryInfo}
             focusOnFirstEntryNewerThan={this.focusOnFirstEntryNewerThan}
-            setModal={this.props.setModal}
             tabIndex={this.props.startingTabIndex + i}
             key={key}
             innerRef={this.entryRef}
@@ -216,12 +216,7 @@
 
   createNewEntry = (threadID: string) => {
     if (!this.props.loggedIn) {
-      this.props.setModal(
-        <LogInFirstModal
-          inOrderTo="edit this calendar"
-          setModal={this.props.setModal}
-        />,
-      );
+      this.props.setModal(<LogInFirstModal inOrderTo="edit this calendar" />);
       return;
     }
     const viewerID = this.props.viewerID;
@@ -240,11 +235,7 @@
   onHistory = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.props.setModal(
-      <HistoryModal
-        mode="day"
-        dayString={this.props.dayString}
-        onClose={this.clearModal}
-      />,
+      <HistoryModal mode="day" dayString={this.props.dayString} />,
     );
   };
 
@@ -258,10 +249,6 @@
       entry.focus();
     }
   };
-
-  clearModal = () => {
-    this.props.setModal(null);
-  };
 }
 
 const ConnectedDay: React.ComponentType<BaseProps> = React.memo<BaseProps>(
@@ -275,6 +262,7 @@
     const nextLocalID = useSelector(state => state.nextLocalID);
     const timeZone = useSelector(state => state.timeZone);
     const dispatch = useDispatch();
+    const modalContext = useModalContext();
 
     return (
       <Day
@@ -285,6 +273,7 @@
         nextLocalID={nextLocalID}
         timeZone={timeZone}
         dispatch={dispatch}
+        setModal={modalContext.setModal}
       />
     );
   },
diff --git a/web/calendar/entry.react.js b/web/calendar/entry.react.js
--- a/web/calendar/entry.react.js
+++ b/web/calendar/entry.react.js
@@ -45,6 +45,7 @@
 import LogInFirstModal from '../modals/account/log-in-first-modal.react';
 import ConcurrentModificationModal from '../modals/concurrent-modification-modal.react';
 import HistoryModal from '../modals/history/history-modal.react';
+import { useModalContext } from '../modals/modal-provider.react';
 import { useSelector } from '../redux/redux-utils';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors';
 import { HistoryVector, DeleteVector } from '../vectors.react';
@@ -54,7 +55,6 @@
   +innerRef: (key: string, me: Entry) => void,
   +entryInfo: EntryInfo,
   +focusOnFirstEntryNewerThan: (time: number) => void,
-  +setModal: (modal: ?React.Node) => void,
   +tabIndex: number,
 };
 type Props = {
@@ -68,6 +68,8 @@
   +createEntry: (info: CreateEntryInfo) => Promise<CreateEntryPayload>,
   +saveEntry: (info: SaveEntryInfo) => Promise<SaveEntryResult>,
   +deleteEntry: (info: DeleteEntryInfo) => Promise<DeleteEntryResult>,
+  +setModal: (modal: ?React.Node) => void,
+  +clearModal: () => void,
 };
 type State = {
   +focused: boolean,
@@ -257,12 +259,7 @@
 
   onChange: (event: SyntheticEvent<HTMLTextAreaElement>) => void = event => {
     if (!this.props.loggedIn) {
-      this.props.setModal(
-        <LogInFirstModal
-          inOrderTo="edit this calendar"
-          setModal={this.props.setModal}
-        />,
-      );
+      this.props.setModal(<LogInFirstModal inOrderTo="edit this calendar" />);
       return;
     }
     const target = event.target;
@@ -389,13 +386,10 @@
             type: concurrentModificationResetActionType,
             payload: { id: entryID, dbText: e.payload.db },
           });
-          this.clearModal();
+          this.props.clearModal();
         };
         this.props.setModal(
-          <ConcurrentModificationModal
-            onClose={this.clearModal}
-            onRefresh={onRefresh}
-          />,
+          <ConcurrentModificationModal onRefresh={onRefresh} />,
         );
       }
       throw e;
@@ -405,12 +399,7 @@
   onDelete: (event: SyntheticEvent<HTMLAnchorElement>) => void = event => {
     event.preventDefault();
     if (!this.props.loggedIn) {
-      this.props.setModal(
-        <LogInFirstModal
-          inOrderTo="edit this calendar"
-          setModal={this.props.setModal}
-        />,
-      );
+      this.props.setModal(<LogInFirstModal inOrderTo="edit this calendar" />);
       return;
     }
     this.dispatchDelete(this.props.entryInfo.id, true);
@@ -459,15 +448,10 @@
           this.props.entryInfo.month,
           this.props.entryInfo.day,
         )}
-        onClose={this.clearModal}
         currentEntryID={this.props.entryInfo.id}
       />,
     );
   };
-
-  clearModal: () => void = () => {
-    this.props.setModal(null);
-  };
 }
 
 export type InnerEntry = Entry;
@@ -492,6 +476,8 @@
     const dispatchActionPromise = useDispatchActionPromise();
     const dispatch = useDispatch();
 
+    const modalContext = useModalContext();
+
     return (
       <Entry
         {...props}
@@ -504,6 +490,8 @@
         deleteEntry={callDeleteEntry}
         dispatchActionPromise={dispatchActionPromise}
         dispatch={dispatch}
+        setModal={modalContext.setModal}
+        clearModal={modalContext.clearModal}
       />
     );
   },
diff --git a/web/calendar/filter-panel.react.js b/web/calendar/filter-panel.react.js
--- a/web/calendar/filter-panel.react.js
+++ b/web/calendar/filter-panel.react.js
@@ -26,6 +26,7 @@
 } from 'lib/types/filter-types';
 import type { Dispatch } from 'lib/types/redux-types';
 
+import { useModalContext } from '../modals/modal-provider.react';
 import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react';
 import { useSelector } from '../redux/redux-utils';
 import {
@@ -35,16 +36,13 @@
 import { MagnifyingGlass } from '../vectors.react';
 import css from './filter-panel.css';
 
-type BaseProps = {
-  +setModal: (modal: ?React.Node) => void,
-};
 type Props = {
-  ...BaseProps,
   +filterThreadInfos: () => $ReadOnlyArray<FilterThreadInfo>,
   +filterThreadSearchIndex: () => SearchIndex,
   +filteredThreadIDs: ?$ReadOnlySet<string>,
   +includeDeleted: boolean,
   +dispatch: Dispatch,
+  +setModal: (modal: ?React.Node) => void,
 };
 type State = {
   +query: string,
@@ -204,9 +202,7 @@
   }
 
   onClickSettings = (threadID: string) => {
-    this.props.setModal(
-      <ThreadSettingsModal threadID={threadID} onClose={this.clearModal} />,
-    );
+    this.props.setModal(<ThreadSettingsModal threadID={threadID} />);
   };
 
   onChangeQuery = (event: SyntheticEvent<HTMLInputElement>) => {
@@ -238,10 +234,6 @@
       },
     });
   };
-
-  clearModal = () => {
-    this.props.setModal(null);
-  };
 }
 
 type ItemProps = {
@@ -369,22 +361,23 @@
   };
 }
 
-const ConnectedFilterPanel: React.ComponentType<BaseProps> = React.memo<BaseProps>(
-  function ConnectedFilterPanel(props) {
+const ConnectedFilterPanel: React.ComponentType<{}> = React.memo<{}>(
+  function ConnectedFilterPanel(): React.Node {
     const filteredThreadIDs = useSelector(filteredThreadIDsSelector);
     const filterThreadInfos = useSelector(webFilterThreadInfos);
     const filterThreadSearchIndex = useSelector(webFilterThreadSearchIndex);
     const includeDeleted = useSelector(includeDeletedSelector);
     const dispatch = useDispatch();
+    const modalContext = useModalContext();
 
     return (
       <FilterPanel
-        {...props}
         filteredThreadIDs={filteredThreadIDs}
         filterThreadInfos={filterThreadInfos}
         filterThreadSearchIndex={filterThreadSearchIndex}
         includeDeleted={includeDeleted}
         dispatch={dispatch}
+        setModal={modalContext.setModal}
       />
     );
   },
diff --git a/web/chat/chat-message-list.react.js b/web/chat/chat-message-list.react.js
--- a/web/chat/chat-message-list.react.js
+++ b/web/chat/chat-message-list.react.js
@@ -47,11 +47,7 @@
 import RelationshipPrompt from './relationship-prompt/relationship-prompt';
 import ThreadTopBar from './thread-top-bar.react';
 
-type BaseProps = {
-  +setModal: (modal: ?React.Node) => void,
-};
 type PassedProps = {
-  ...BaseProps,
   // Redux state
   +activeChatThreadID: ?string,
   +threadInfo: ?ThreadInfo,
@@ -191,7 +187,7 @@
         </div>
       );
     }
-    const { threadInfo, setModal } = this.props;
+    const { threadInfo } = this.props;
     invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
     return (
       <Message
@@ -199,7 +195,6 @@
         threadInfo={threadInfo}
         setMouseOverMessagePosition={this.setMouseOverMessagePosition}
         mouseOverMessagePosition={this.state.mouseOverMessagePosition}
-        setModal={setModal}
         timeZone={this.props.timeZone}
         key={ChatMessageList.keyExtractor(item)}
       />
@@ -383,9 +378,8 @@
 
 registerFetchKey(fetchMessagesBeforeCursorActionTypes);
 registerFetchKey(fetchMostRecentMessagesActionTypes);
-
-const ConnectedChatMessageList: React.ComponentType<BaseProps> = React.memo<BaseProps>(
-  function ConnectedChatMessageList(props) {
+const ConnectedChatMessageList: React.ComponentType<{}> = React.memo<{}>(
+  function ConnectedChatMessageList(): React.Node {
     const userAgent = useSelector(state => state.userAgent);
     const supportsReverseFlex = React.useMemo(() => {
       const browser = detectBrowser(userAgent);
@@ -475,7 +469,6 @@
     return (
       <MessageListContext.Provider value={messageListContext}>
         <ChatMessageList
-          {...props}
           activeChatThreadID={activeChatThreadID}
           threadInfo={threadInfo}
           messageListData={messageListData}
diff --git a/web/chat/chat-tabs.react.js b/web/chat/chat-tabs.react.js
--- a/web/chat/chat-tabs.react.js
+++ b/web/chat/chat-tabs.react.js
@@ -11,10 +11,7 @@
 import ChatThreadTab from './chat-thread-tab.react';
 import { ThreadListContext } from './thread-list-provider';
 
-type Props = {
-  +setModal: (modal: ?React.Node) => void,
-};
-function ChatTabs(props: Props): React.Node {
+function ChatTabs(): React.Node {
   let backgroundTitle = 'Background';
   const unreadBackgroundCountVal = useSelector(unreadBackgroundCount);
   if (unreadBackgroundCountVal) {
@@ -52,7 +49,7 @@
         />
       </div>
       <div className={css.threadList}>
-        <ChatThreadList setModal={props.setModal} />
+        <ChatThreadList />
       </div>
     </div>
   );
diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js
--- a/web/chat/chat-thread-list-item.react.js
+++ b/web/chat/chat-thread-list-item.react.js
@@ -21,10 +21,9 @@
 
 type Props = {
   +item: ChatThreadItem,
-  +setModal: (modal: ?React.Node) => void,
 };
 function ChatThreadListItem(props: Props): React.Node {
-  const { item, setModal } = props;
+  const { item } = props;
   const {
     threadInfo,
     lastUpdatedTimeIncludingSidebars,
@@ -105,7 +104,6 @@
           threadInfo={item.threadInfo}
           unread={sidebarItem.unread}
           showingSidebarsInline={sidebarItem.showingSidebarsInline}
-          setModal={setModal}
           key="seeMore"
         />
       );
diff --git a/web/chat/chat-thread-list-see-more-sidebars.react.js b/web/chat/chat-thread-list-see-more-sidebars.react.js
--- a/web/chat/chat-thread-list-see-more-sidebars.react.js
+++ b/web/chat/chat-thread-list-see-more-sidebars.react.js
@@ -6,21 +6,20 @@
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import SidebarListModal from '../modals/chat/sidebar-list-modal.react';
+import { useModalContext } from '../modals/modal-provider.react';
 import css from './chat-thread-list.css';
 
 type Props = {
   +threadInfo: ThreadInfo,
   +unread: boolean,
   +showingSidebarsInline: boolean,
-  +setModal: (modal: ?React.Node) => void,
 };
 function ChatThreadListSeeMoreSidebars(props: Props): React.Node {
-  const { unread, showingSidebarsInline, setModal, threadInfo } = props;
+  const { unread, showingSidebarsInline, threadInfo } = props;
+  const { setModal } = useModalContext();
+
   const onClick = React.useCallback(
-    () =>
-      setModal(
-        <SidebarListModal setModal={setModal} threadInfo={threadInfo} />,
-      ),
+    () => setModal(<SidebarListModal threadInfo={threadInfo} />),
     [setModal, threadInfo],
   );
   const buttonText = showingSidebarsInline ? 'See more...' : 'See sidebars...';
diff --git a/web/chat/chat-thread-list.react.js b/web/chat/chat-thread-list.react.js
--- a/web/chat/chat-thread-list.react.js
+++ b/web/chat/chat-thread-list.react.js
@@ -10,12 +10,7 @@
 import { ThreadListContext } from './thread-list-provider';
 import ThreadListSearch from './thread-list-search.react';
 
-type Props = {
-  +setModal: (modal: ?React.Node) => void,
-};
-
-function ChatThreadList(props: Props): React.Node {
-  const { setModal } = props;
+function ChatThreadList(): React.Node {
   const threadListContext = React.useContext(ThreadListContext);
   invariant(
     threadListContext,
@@ -31,17 +26,13 @@
 
   const threadComponents: React.Node[] = React.useMemo(() => {
     const threads = threadList.map(item => (
-      <ChatThreadListItem
-        item={item}
-        key={item.threadInfo.id}
-        setModal={setModal}
-      />
+      <ChatThreadListItem item={item} key={item.threadInfo.id} />
     ));
     if (threads.length === 0 && isBackground) {
       threads.push(<EmptyItem key="emptyItem" />);
     }
     return threads;
-  }, [threadList, isBackground, setModal]);
+  }, [threadList, isBackground]);
 
   return (
     <div className={css.threadListContainer}>
diff --git a/web/chat/chat.react.js b/web/chat/chat.react.js
--- a/web/chat/chat.react.js
+++ b/web/chat/chat.react.js
@@ -6,16 +6,13 @@
 import ChatTabs from './chat-tabs.react';
 import { ThreadListProvider } from './thread-list-provider';
 
-type Props = {
-  +setModal: (modal: ?React.Node) => void,
-};
-function Chat(props: Props): React.Node {
+function Chat(): React.Node {
   return (
     <>
       <ThreadListProvider>
-        <ChatTabs setModal={props.setModal} />
+        <ChatTabs />
       </ThreadListProvider>
-      <ChatMessageList setModal={props.setModal} />
+      <ChatMessageList />
     </>
   );
 }
diff --git a/web/chat/message.react.js b/web/chat/message.react.js
--- a/web/chat/message.react.js
+++ b/web/chat/message.react.js
@@ -24,7 +24,6 @@
     messagePositionInfo: MessagePositionInfo,
   ) => void,
   +mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo,
-  +setModal: (modal: ?React.Node) => void,
   +timeZone: ?string,
 };
 function Message(props: Props): React.Node {
@@ -58,7 +57,6 @@
         threadInfo={props.threadInfo}
         setMouseOverMessagePosition={props.setMouseOverMessagePosition}
         mouseOverMessagePosition={props.mouseOverMessagePosition}
-        setModal={props.setModal}
       />
     );
   } else {
diff --git a/web/chat/multimedia-message.react.js b/web/chat/multimedia-message.react.js
--- a/web/chat/multimedia-message.react.js
+++ b/web/chat/multimedia-message.react.js
@@ -24,7 +24,6 @@
     messagePositionInfo: MessagePositionInfo,
   ) => void,
   +mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo,
-  +setModal: (modal: ?React.Node) => void,
 };
 type Props = {
   ...BaseProps,
@@ -33,7 +32,7 @@
 };
 class MultimediaMessage extends React.PureComponent<Props> {
   render() {
-    const { item, setModal, inputState } = this.props;
+    const { item, inputState } = this.props;
     invariant(
       item.messageInfo.type === messageTypes.IMAGES ||
         item.messageInfo.type === messageTypes.MULTIMEDIA,
@@ -52,7 +51,6 @@
         <Multimedia
           uri={singleMedia.uri}
           pendingUpload={pendingUpload}
-          setModal={setModal}
           multimediaCSSClass={css.multimedia}
           multimediaImageCSSClass={css.multimediaImage}
           key={singleMedia.id}
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -73,13 +73,13 @@
 
 import { validateFile, preloadImage } from '../media/media-utils';
 import InvalidUploadModal from '../modals/chat/invalid-upload.react';
+import { useModalContext } from '../modals/modal-provider.react';
 import { useSelector } from '../redux/redux-utils';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors';
 import { type PendingMultimediaUpload, InputStateContext } from './input-state';
 
 type BaseProps = {
   +children: React.Node,
-  +setModal: (modal: ?React.Node) => void,
 };
 type Props = {
   ...BaseProps,
@@ -108,6 +108,7 @@
     text: string,
   ) => Promise<SendMessageResult>,
   +newThread: (request: ClientNewThreadRequest) => Promise<NewThreadResult>,
+  +setModal: (modal: ?React.Node) => void,
 };
 type State = {
   +pendingUploads: {
@@ -518,7 +519,7 @@
     );
 
     if (appendResults.some(({ result }) => !result.success)) {
-      setModal(<InvalidUploadModal setModal={setModal} />);
+      setModal(<InvalidUploadModal />);
 
       const time = Date.now() - selectionTime;
       const reports = [];
@@ -1245,6 +1246,7 @@
     const callNewThread = useServerCall(newThread);
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
+    const modalContext = useModalContext();
 
     return (
       <InputStateContainer
@@ -1262,6 +1264,7 @@
         newThread={callNewThread}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
+        setModal={modalContext.setModal}
       />
     );
   },
diff --git a/web/media/multimedia-modal.react.js b/web/media/multimedia-modal.react.js
--- a/web/media/multimedia-modal.react.js
+++ b/web/media/multimedia-modal.react.js
@@ -4,12 +4,18 @@
 import * as React from 'react';
 import { XCircle as XCircleIcon } from 'react-feather';
 
+import { useModalContext } from '../modals/modal-provider.react';
 import css from './media.css';
 
-type Props = {
+type BaseProps = {
   +uri: string,
-  +setModal: (modal: ?React.Node) => void,
 };
+
+type Props = {
+  ...BaseProps,
+  +clearModal: (modal: ?React.Node) => void,
+};
+
 class MultimediaModal extends React.PureComponent<Props> {
   overlay: ?HTMLDivElement;
 
@@ -29,7 +35,7 @@
       >
         <img src={this.props.uri} />
         <XCircleIcon
-          onClick={this.close}
+          onClick={this.props.clearModal}
           className={css.closeMultimediaModal}
         />
       </div>
@@ -44,7 +50,7 @@
     event: SyntheticEvent<HTMLDivElement>,
   ) => void = event => {
     if (event.target === this.overlay) {
-      this.close();
+      this.props.clearModal();
     }
   };
 
@@ -52,13 +58,15 @@
     event: SyntheticKeyboardEvent<HTMLDivElement>,
   ) => void = event => {
     if (event.keyCode === 27) {
-      this.close();
+      this.props.clearModal();
     }
   };
+}
 
-  close: () => void = () => {
-    this.props.setModal(null);
-  };
+function ConnectedMultiMediaModal(props: BaseProps): React.Node {
+  const modalContext = useModalContext();
+
+  return <MultimediaModal {...props} clearModal={modalContext.clearModal} />;
 }
 
-export default MultimediaModal;
+export default ConnectedMultiMediaModal;
diff --git a/web/media/multimedia.react.js b/web/media/multimedia.react.js
--- a/web/media/multimedia.react.js
+++ b/web/media/multimedia.react.js
@@ -11,17 +11,22 @@
 } from 'react-feather';
 
 import { type PendingMultimediaUpload } from '../input/input-state';
+import { useModalContext } from '../modals/modal-provider.react';
 import css from './media.css';
 import MultimediaModal from './multimedia-modal.react';
 
+type BaseProps = {
+  +uri: string,
+  +pendingUpload?: ?PendingMultimediaUpload,
+  +remove?: (uploadID: string) => void,
+  +multimediaCSSClass: string,
+  +multimediaImageCSSClass: string,
+};
 type Props = {
-  uri: string,
-  pendingUpload?: ?PendingMultimediaUpload,
-  remove?: (uploadID: string) => void,
-  setModal?: (modal: ?React.Node) => void,
-  multimediaCSSClass: string,
-  multimediaImageCSSClass: string,
+  ...BaseProps,
+  +setModal: (modal: ?React.Node) => void,
 };
+
 class Multimedia extends React.PureComponent<Props> {
   componentDidUpdate(prevProps: Props) {
     const { uri, pendingUpload } = this.props;
@@ -108,8 +113,14 @@
 
     const { setModal, uri } = this.props;
     invariant(setModal, 'should be set');
-    setModal(<MultimediaModal uri={uri} setModal={setModal} />);
+    setModal(<MultimediaModal uri={uri} />);
   };
 }
 
-export default Multimedia;
+function ConnectedMultimediaContainer(props: BaseProps): React.Node {
+  const modalContext = useModalContext();
+
+  return <Multimedia {...props} setModal={modalContext.setModal} />;
+}
+
+export default ConnectedMultimediaContainer;
diff --git a/web/modals/account/log-in-first-modal.react.js b/web/modals/account/log-in-first-modal.react.js
--- a/web/modals/account/log-in-first-modal.react.js
+++ b/web/modals/account/log-in-first-modal.react.js
@@ -2,18 +2,25 @@
 
 import * as React from 'react';
 
+import { useModalContext } from '../../modals/modal-provider.react';
 import css from '../../style.css';
 import Modal from '../modal.react';
 import LogInModal from './log-in-modal.react';
 
-type Props = {
+type BaseProps = {
   +inOrderTo: string,
+};
+
+type Props = {
+  ...BaseProps,
   +setModal: (modal: ?React.Node) => void,
+  +clearModal: () => void,
 };
+
 class LogInFirstModal extends React.PureComponent<Props> {
   render(): React.Node {
     return (
-      <Modal name="Log in" onClose={this.clearModal}>
+      <Modal name="Log in" onClose={this.props.clearModal}>
         <div className={css['modal-body']}>
           <p>
             {`In order to ${this.props.inOrderTo}, you'll first need to `}
@@ -31,14 +38,22 @@
     );
   }
 
-  clearModal: () => void = () => {
-    this.props.setModal(null);
-  };
-
   onClickLogIn: (event: SyntheticEvent<HTMLAnchorElement>) => void = event => {
     event.preventDefault();
-    this.props.setModal(<LogInModal setModal={this.props.setModal} />);
+    this.props.setModal(<LogInModal />);
   };
 }
 
-export default LogInFirstModal;
+function ConnectedLoginFirstModal(props: BaseProps): React.Node {
+  const modalContext = useModalContext();
+
+  return (
+    <LogInFirstModal
+      {...props}
+      setModal={modalContext.setModal}
+      clearModal={modalContext.clearModal}
+    />
+  );
+}
+
+export default ConnectedLoginFirstModal;
diff --git a/web/modals/account/log-in-modal.react.js b/web/modals/account/log-in-modal.react.js
--- a/web/modals/account/log-in-modal.react.js
+++ b/web/modals/account/log-in-modal.react.js
@@ -25,18 +25,16 @@
 import { useSelector } from '../../redux/redux-utils';
 import { webLogInExtraInfoSelector } from '../../selectors/account-selectors';
 import Input from '../input.react';
+import { useModalContext } from '../modal-provider.react';
 import Modal from '../modal.react';
 import css from './user-settings-modal.css';
 
-type BaseProps = {
-  +setModal: (modal: ?React.Node) => void,
-};
 type Props = {
-  ...BaseProps,
   +inputDisabled: boolean,
   +logInExtraInfo: () => LogInExtraInfo,
   +dispatchActionPromise: DispatchActionPromise,
   +logIn: (logInInfo: LogInInfo) => Promise<LogInResult>,
+  +clearModal: () => void,
 };
 type State = {
   +username: string,
@@ -63,7 +61,7 @@
 
   render() {
     return (
-      <Modal name="Log in" onClose={this.clearModal}>
+      <Modal name="Log in" onClose={this.props.clearModal}>
         <div className={css['modal-body']}>
           <form method="POST">
             <div>
@@ -175,7 +173,7 @@
         password: this.state.password,
         ...extraInfo,
       });
-      this.clearModal();
+      this.props.clearModal();
       return result;
     } catch (e) {
       if (e.message === 'invalid_parameters') {
@@ -216,28 +214,24 @@
       throw e;
     }
   }
-
-  clearModal = () => {
-    this.props.setModal(null);
-  };
 }
 
 const loadingStatusSelector = createLoadingStatusSelector(logInActionTypes);
-
-const ConnectedLoginModal: React.ComponentType<BaseProps> = React.memo<BaseProps>(
-  function ConnectedLoginModal(props) {
+const ConnectedLoginModal: React.ComponentType<{}> = React.memo<{}>(
+  function ConnectedLoginModal(): React.Node {
     const inputDisabled = useSelector(loadingStatusSelector) === 'loading';
     const loginExtraInfo = useSelector(webLogInExtraInfoSelector);
     const callLogIn = useServerCall(logIn);
     const dispatchActionPromise = useDispatchActionPromise();
+    const modalContext = useModalContext();
 
     return (
       <LogInModal
-        {...props}
         inputDisabled={inputDisabled}
         logInExtraInfo={loginExtraInfo}
         logIn={callLogIn}
         dispatchActionPromise={dispatchActionPromise}
+        clearModal={modalContext.clearModal}
       />
     );
   },
diff --git a/web/modals/account/user-settings-modal.react.js b/web/modals/account/user-settings-modal.react.js
--- a/web/modals/account/user-settings-modal.react.js
+++ b/web/modals/account/user-settings-modal.react.js
@@ -29,6 +29,7 @@
 import Button from '../../components/button.react';
 import { useSelector } from '../../redux/redux-utils';
 import Input from '../input.react';
+import { useModalContext } from '../modal-provider.react';
 import Modal from '../modal.react';
 import css from './user-settings-modal.css';
 
@@ -58,11 +59,7 @@
   };
 }
 
-type BaseProps = {
-  +setModal: (modal: ?React.Node) => void,
-};
 type Props = {
-  ...BaseProps,
   +currentUserInfo: ?CurrentUserInfo,
   +preRequestUserState: PreRequestUserState,
   +inputDisabled: boolean,
@@ -73,6 +70,7 @@
   ) => Promise<LogOutResult>,
   +changeUserPassword: (passwordUpdate: PasswordUpdate) => Promise<void>,
   +logOut: (preRequestUserState: PreRequestUserState) => Promise<LogOutResult>,
+  +clearModal: () => void,
 };
 type State = {
   +newPassword: string,
@@ -115,7 +113,7 @@
 
   logOut = async () => {
     await this.props.logOut(this.props.preRequestUserState);
-    this.clearModal();
+    this.props.clearModal();
   };
 
   render() {
@@ -206,7 +204,7 @@
     }
 
     return (
-      <Modal name="Edit account" onClose={this.clearModal} size="large">
+      <Modal name="Edit account" onClose={this.props.clearModal} size="large">
         <ul className={css['tab-panel']}>
           <Tab
             name="General"
@@ -328,7 +326,7 @@
         },
         currentPassword: this.state.currentPassword,
       });
-      this.clearModal();
+      this.props.clearModal();
     } catch (e) {
       if (e.message === 'invalid_credentials') {
         this.setState(
@@ -377,7 +375,7 @@
         this.state.currentPassword,
         this.props.preRequestUserState,
       );
-      this.clearModal();
+      this.props.clearModal();
       return response;
     } catch (e) {
       const errorMessage =
@@ -400,10 +398,6 @@
       throw e;
     }
   }
-
-  clearModal = () => {
-    this.props.setModal(null);
-  };
 }
 
 const deleteAccountLoadingStatusSelector = createLoadingStatusSelector(
@@ -412,9 +406,8 @@
 const changeUserPasswordLoadingStatusSelector = createLoadingStatusSelector(
   changeUserPasswordActionTypes,
 );
-
-const ConnectedUserSettingsModal: React.ComponentType<BaseProps> = React.memo<BaseProps>(
-  function ConnectedUserSettingsModal(props) {
+const ConnectedUserSettingsModal: React.ComponentType<{}> = React.memo<{}>(
+  function ConnectedUserSettingsModal(): React.Node {
     const currentUserInfo = useSelector(state => state.currentUserInfo);
     const preRequestUserState = useSelector(preRequestUserStateSelector);
     const inputDisabled = useSelector(
@@ -427,9 +420,10 @@
     const dispatchActionPromise = useDispatchActionPromise();
     const boundLogOut = useServerCall(logOut);
 
+    const modalContext = useModalContext();
+
     return (
       <UserSettingsModal
-        {...props}
         currentUserInfo={currentUserInfo}
         preRequestUserState={preRequestUserState}
         inputDisabled={inputDisabled}
@@ -437,6 +431,7 @@
         changeUserPassword={callChangeUserPassword}
         dispatchActionPromise={dispatchActionPromise}
         logOut={boundLogOut}
+        clearModal={modalContext.clearModal}
       />
     );
   },
diff --git a/web/modals/chat/invalid-upload.react.js b/web/modals/chat/invalid-upload.react.js
--- a/web/modals/chat/invalid-upload.react.js
+++ b/web/modals/chat/invalid-upload.react.js
@@ -2,26 +2,29 @@
 
 import * as React from 'react';
 
+import { useModalContext } from '../../modals/modal-provider.react';
 import css from '../../style.css';
 import Modal from '../modal.react';
 
 type Props = {
-  +setModal: (modal: ?React.Node) => void,
+  +clearModal: () => void,
 };
 class InvalidUploadModal extends React.PureComponent<Props> {
   render(): React.Node {
     return (
-      <Modal name="Invalid upload" onClose={this.clearModal}>
+      <Modal name="Invalid upload" onClose={this.props.clearModal}>
         <div className={css['modal-body']}>
           <p>We don&apos;t support that file type yet :(</p>
         </div>
       </Modal>
     );
   }
+}
+
+function ConnectedInvalidUploadModal(): React.Node {
+  const modalContext = useModalContext();
 
-  clearModal: () => void = () => {
-    this.props.setModal(null);
-  };
+  return <InvalidUploadModal clearModal={modalContext.clearModal} />;
 }
 
-export default InvalidUploadModal;
+export default ConnectedInvalidUploadModal;
diff --git a/web/modals/chat/sidebar-list-modal.react.js b/web/modals/chat/sidebar-list-modal.react.js
--- a/web/modals/chat/sidebar-list-modal.react.js
+++ b/web/modals/chat/sidebar-list-modal.react.js
@@ -15,22 +15,20 @@
 import { useSelector } from '../../redux/redux-utils';
 import globalCSS from '../../style.css';
 import { MagnifyingGlass } from '../../vectors.react';
+import { useModalContext } from '../modal-provider.react';
 import Modal from '../modal.react';
 
 type Props = {
-  +setModal: (modal: ?React.Node) => void,
   +threadInfo: ThreadInfo,
 };
+
 function SidebarListModal(props: Props): React.Node {
-  const { setModal, threadInfo } = props;
+  const { threadInfo } = props;
   const [searchState, setSearchState] = React.useState({
     text: '',
     results: new Set<string>(),
   });
-
-  const clearModal = React.useCallback(() => {
-    setModal(null);
-  }, [setModal]);
+  const { clearModal } = useModalContext();
 
   const sidebarInfos = useSelector(
     state => sidebarInfoSelector(state)[threadInfo.id] ?? [],
diff --git a/web/modals/concurrent-modification-modal.react.js b/web/modals/concurrent-modification-modal.react.js
--- a/web/modals/concurrent-modification-modal.react.js
+++ b/web/modals/concurrent-modification-modal.react.js
@@ -3,16 +3,18 @@
 import * as React from 'react';
 
 import css from '../style.css';
+import { useModalContext } from './modal-provider.react';
 import Modal from './modal.react';
 
 type Props = {
   +onRefresh: () => void,
-  +onClose: () => void,
 };
 
 export default function ConcurrentModificationModal(props: Props): React.Node {
+  const modalContext = useModalContext();
+
   return (
-    <Modal name="Concurrent modification" onClose={props.onClose}>
+    <Modal name="Concurrent modification" onClose={modalContext.clearModal}>
       <div className={css['modal-body']}>
         <p>
           It looks like somebody is attempting to modify that field at the same
diff --git a/web/modals/history/history-modal.react.js b/web/modals/history/history-modal.react.js
--- a/web/modals/history/history-modal.react.js
+++ b/web/modals/history/history-modal.react.js
@@ -33,6 +33,7 @@
 import { dateFromString } from 'lib/utils/date-utils';
 
 import LoadingIndicator from '../../loading-indicator.react';
+import { useModalContext } from '../../modals/modal-provider.react';
 import { useSelector } from '../../redux/redux-utils';
 import { allDaysToEntries } from '../../selectors/entry-selectors';
 import Modal from '../modal.react';
@@ -43,7 +44,6 @@
 type BaseProps = {
   +mode: HistoryMode,
   +dayString: string,
-  +onClose: () => void,
   +currentEntryID?: ?string,
 };
 type Props = {
@@ -59,6 +59,7 @@
   +fetchRevisionsForEntry: (
     entryID: string,
   ) => Promise<$ReadOnlyArray<HistoryRevisionInfo>>,
+  +onClose: () => void,
 };
 type State = {
   +mode: HistoryMode,
@@ -262,6 +263,7 @@
     const callFetchEntries = useServerCall(fetchEntries);
     const callFetchRevisionsForEntry = useServerCall(fetchRevisionsForEntry);
     const dispatchActionPromise = useDispatchActionPromise();
+    const modalContext = useModalContext();
 
     return (
       <HistoryModal
@@ -273,6 +275,7 @@
         fetchEntries={callFetchEntries}
         fetchRevisionsForEntry={callFetchRevisionsForEntry}
         dispatchActionPromise={dispatchActionPromise}
+        onClose={modalContext.clearModal}
       />
     );
   },
diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -85,4 +85,8 @@
   };
 }
 
-export default Modal;
+function ConnectedModal(props: Props): React.Node {
+  return <Modal {...props}>{props.children}</Modal>;
+}
+
+export default ConnectedModal;
diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/thread-settings-modal.react.js
--- a/web/modals/threads/thread-settings-modal.react.js
+++ b/web/modals/threads/thread-settings-modal.react.js
@@ -36,6 +36,7 @@
 } from 'lib/utils/action-utils';
 import { firstLine } from 'lib/utils/string-utils';
 
+import { useModalContext } from '../../modals/modal-provider.react';
 import { useSelector } from '../../redux/redux-utils';
 import css from '../../style.css';
 import Modal from '../modal.react';
@@ -71,7 +72,6 @@
 
 type BaseProps = {
   +threadID: string,
-  +onClose: () => void,
 };
 type Props = {
   ...BaseProps,
@@ -87,6 +87,7 @@
   +changeThreadSettings: (
     update: UpdateThreadRequest,
   ) => Promise<ChangeThreadSettingsPayload>,
+  +onClose: () => void,
 };
 type State = {
   +queuedChanges: ThreadChanges,
@@ -564,9 +565,11 @@
     const threadInfo: ?ThreadInfo = useSelector(
       state => threadInfoSelector(state)[props.threadID],
     );
+    const modalContext = useModalContext();
+
     if (!threadInfo) {
       return (
-        <Modal onClose={props.onClose} name="Invalid thread">
+        <Modal onClose={modalContext.clearModal} name="Invalid thread">
           <div className={css['modal-body']}>
             <p>You no longer have permission to view this thread</p>
           </div>
@@ -584,6 +587,7 @@
         deleteThread={callDeleteThread}
         changeThreadSettings={callChangeThreadSettings}
         dispatchActionPromise={dispatchActionPromise}
+        onClose={modalContext.clearModal}
       />
     );
   },
diff --git a/web/sidebar/community-picker.react.js b/web/sidebar/community-picker.react.js
--- a/web/sidebar/community-picker.react.js
+++ b/web/sidebar/community-picker.react.js
@@ -4,16 +4,15 @@
 
 import Button from '../components/button.react';
 import UserSettingsModal from '../modals/account/user-settings-modal.react.js';
+import { useModalContext } from '../modals/modal-provider.react';
 import SWMansionIcon from '../SWMansionIcon.react';
 import css from './community-picker.css';
 
-type Props = { +setModal: (modal: ?React.Node) => void };
-
-function CommunityPicker(props: Props): React.Node {
-  const { setModal } = props;
+function CommunityPicker(): React.Node {
+  const { setModal } = useModalContext();
 
   const setModalToUserSettings = React.useCallback(() => {
-    setModal(<UserSettingsModal setModal={setModal} />);
+    setModal(<UserSettingsModal />);
   }, [setModal]);
 
   return (
diff --git a/web/sidebar/left-layout-aside.react.js b/web/sidebar/left-layout-aside.react.js
--- a/web/sidebar/left-layout-aside.react.js
+++ b/web/sidebar/left-layout-aside.react.js
@@ -5,15 +5,11 @@
 import AppSwitcher from './app-switcher.react';
 import CommunityPicker from './community-picker.react';
 import css from './left-layout-aside.css';
-type Props = {
-  +setModal: (modal: ?React.Node) => void,
-};
 
-function LeftLayoutAside(props: Props): React.Node {
-  const { setModal } = props;
+function LeftLayoutAside(): React.Node {
   return (
     <aside className={css.container}>
-      <CommunityPicker setModal={setModal} />
+      <CommunityPicker />
       <AppSwitcher />
     </aside>
   );
diff --git a/web/splash/splash.react.js b/web/splash/splash.react.js
--- a/web/splash/splash.react.js
+++ b/web/splash/splash.react.js
@@ -20,20 +20,18 @@
 
 import LoadingIndicator from '../loading-indicator.react';
 import LogInModal from '../modals/account/log-in-modal.react';
+import { useModalContext } from '../modals/modal-provider.react';
 import { useSelector } from '../redux/redux-utils';
 import css from './splash.css';
 
 const defaultRequestAccessScrollHeight = 390;
 
-type BaseProps = {
-  +setModal: (modal: ?React.Node) => void,
-  +currentModal: ?React.Node,
-};
 type Props = {
-  ...BaseProps,
   +loadingStatus: LoadingStatus,
   +dispatchActionPromise: DispatchActionPromise,
   +requestAccess: (accessRequest: AccessRequest) => Promise<void>,
+  +setModal: (modal: React.Node) => void,
+  +modal: ?React.Node,
 };
 type State = {
   +platform: DeviceType,
@@ -178,7 +176,7 @@
             </div>
           </div>
         </div>
-        {this.props.currentModal}
+        {this.props.modal}
       </React.Fragment>
     );
   }
@@ -201,7 +199,7 @@
 
   onClickLogIn = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
-    this.props.setModal(<LogInModal setModal={this.props.setModal} />);
+    this.props.setModal(<LogInModal />);
   };
 
   onClickRequestAccess = (event: SyntheticEvent<HTMLAnchorElement>) => {
@@ -260,18 +258,22 @@
 const loadingStatusSelector = createLoadingStatusSelector(
   requestAccessActionTypes,
 );
-const ConnectedSplash: React.ComponentType<BaseProps> = React.memo<BaseProps>(
-  function ConnectedSplash(props) {
+
+const ConnectedSplash: React.ComponentType<{}> = React.memo<{}>(
+  function ConnectedSplash(): React.Node {
     const loadingStatus = useSelector(loadingStatusSelector);
     const callRequestAccess = useServerCall(requestAccess);
     const dispatchActionPromise = useDispatchActionPromise();
 
+    const modalContext = useModalContext();
+
     return (
       <Splash
-        {...props}
         loadingStatus={loadingStatus}
         requestAccess={callRequestAccess}
         dispatchActionPromise={dispatchActionPromise}
+        setModal={modalContext.setModal}
+        modal={modalContext.modal}
       />
     );
   },